/* 基础样式重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 自定义样式和变量 */
:root {
	--color-primary: #00796b;
	--color-secondary: #004d40;
	--color-accent: #1e88e5;
	--color-danger: #d32f2f;
	--color-light: #e0f7fa;
	--color-dark: #263238;
}

/* 基础布局样式 */
body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.5;
	color: #333;
}

/* 核心布局工具类 */
.fade-in {
	animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.items-center {
	align-items: center;
}

.justify-between {
	justify-content: space-between;
}

.space-x-2 > * + * {
	margin-left: 0.5rem;
}

.space-x-4 > * + * {
	margin-left: 1rem;
}

.space-y-2 > * + * {
	margin-top: 0.5rem;
}

.space-y-3 > * + * {
	margin-top: 0.75rem;
}

.space-y-4 > * + * {
	margin-top: 1rem;
}

.space-y-5 > * + * {
	margin-top: 1.25rem;
}

/* 容器和边距 */
.max-w-4xl {
	max-width: 56rem;
}

.max-w-md {
	max-width: 28rem;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.mb-2 {
	margin-bottom: 0.5rem;
}

.mb-4 {
	margin-bottom: 1rem;
}

.mb-6 {
	margin-bottom: 1.5rem;
}

.mt-1 {
	margin-top: 0.25rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

.mt-4 {
	margin-top: 1rem;
}

.p-2 {
	padding: 0.5rem;
}

.p-3 {
	padding: 0.75rem;
}

.p-4 {
	padding: 1rem;
}

.p-5 {
	padding: 1.25rem;
}

.p-6 {
	padding: 1.5rem;
}

.p-8 {
	padding: 2rem;
}

.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* 字体和文本 */
.font-sans {
	font-family: sans-serif;
}

.antialiased {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.font-bold {
	font-weight: 700;
}

.font-medium {
	font-weight: 500;
}

.text-center {
	text-align: center;
}

.text-sm {
	font-size: 0.875rem;
}

.text-base {
	font-size: 1rem;
}

.text-lg {
	font-size: 1.125rem;
}

.text-xl {
	font-size: 1.25rem;
}

.text-2xl {
	font-size: 1.5rem;
}

/* 响应式字体大小 - 模拟clamp函数 */
.md\:text-\[clamp\(1\.75rem\,3vw\,2\.5rem\)\] {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.tracking-tight {
	letter-spacing: -0.025em;
}

/* 动画效果 */
.float-slow {
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* 颜色和背景 */
.bg-white {
	background-color: white;
}

/* 电阻色环计算器所需的颜色类 */
.bg-black {
	background-color: #000000;
}

.bg-brown-700 {
	background-color: #8b4513;
}

.bg-red-600 {
	background-color: #dc2626;
}

.bg-orange-500 {
	background-color: #f97316;
}

.bg-yellow-400 {
	background-color: #facc15;
}

.bg-yellow-500 {
	background-color: #eab308;
}

.bg-green-600 {
	background-color: #16a34a;
}

.bg-blue-600 {
	background-color: #2563eb;
}

.bg-purple-600 {
	background-color: #7e22ce;
}

.bg-gray-300 {
	background-color: #d1d5db;
}

.bg-gray-400 {
	background-color: #9ca3af;
}

.bg-gray-500 {
	background-color: #6b7280;
}

/* 半透明背景支持 */
.bg-white\/20 {
	background-color: rgba(255, 255, 255, 0.2);
}

.bg-white\/10 {
	background-color: rgba(255, 255, 255, 0.1);
}

/* 文本半透明支持 */
.text-white\/80 {
	color: rgba(255, 255, 255, 0.8);
}

/* Font Awesome 图标基础样式支持 */
.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* 由于无法加载外部Font Awesome，我们将使用简单的文字代替一些关键图标 */
}

/* 简单图标替代（基本功能） */
.fa-wrench::before {
	content: '🔧';
}
.fa-microchip::before {
	content: '🧮';
}
.fa-bolt::before {
	content: '⚡';
}
.fa-random::before {
	content: '➡️';
}
.fa-database::before {
	content: '📊';
}
.fa-plug::before {
	content: '🔌';
}
.fa-battery-three-quarters::before {
	content: '🔋';
}
.fa-calculator::before {
	content: '📱';
}
.fa-refresh::before {
	content: '🔄';
}
.fa-github::before {
	content: '📂';
}
.fa-twitter::before {
	content: '💬';
}
.fa-envelope::before {
	content: '📧';
}

/* 模拟文本渐变支持 */
.from-blue-50 {
	background-image: linear-gradient(to bottom right, var(--color-light), #e5f2ff);
}

.bg-gray-50 {
	background-color: #f9fafb;
}

.bg-light {
	background-color: var(--color-light);
}

.text-gray-400 {
	color: #9ca3af;
}

.text-gray-500 {
	color: #6b7280;
}

.text-gray-600 {
	color: #4b5563;
}

.text-gray-700 {
	color: #374151;
}

.text-primary {
	color: var(--color-primary);
}

.text-secondary {
	color: var(--color-secondary);
}

.text-accent {
	color: var(--color-accent);
}

.text-white {
	color: white;
}

/* 边框和圆角 */
.rounded-lg {
	border-radius: 0.5rem;
}

.rounded-full {
	border-radius: 9999px;
}

.rounded-2xl {
	border-radius: 1rem;
}

.border-0 {
	border: 0;
}

.border-b {
	border-bottom-width: 1px;
}

.border-gray-200 {
	border-color: #e5e7eb;
}

/* 阴影 */
.shadow-lg {
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 尺寸 */
.w-full {
	width: 100%;
}

.h-full {
	height: 100%;
}

.min-h-screen {
	min-height: 100vh;
}

/* 位置 */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.top-0 {
	top: 0;
}

.right-0 {
	right: 0;
}

.bottom-0 {
	bottom: 0;
}

.left-0 {
	left: 0;
}

.left-10 {
	left: 10%;
}

.z-10 {
	z-index: 10;
}

/* 过渡动画 */
.transition-all {
	transition: all 0.3s ease;
}

.transition-colors {
	transition: color 0.3s ease;
}

.duration-300 {
	transition-duration: 300ms;
}

.duration-500 {
	transition-duration: 500ms;
}

/* 交互 */
.hover\:shadow-2xl:hover {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover\:bg-white\/20:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

.hover\:text-accent:hover {
	color: var(--color-accent);
}

/* 显示和隐藏 */
.hidden {
	display: none;
}

/* 背景渐变 */
.bg-gradient-to-br {
	background-image: linear-gradient(to bottom right, var(--color-light), #f0f9ff);
}

.bg-gradient-to-r {
	background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary));
}

/* 装饰和特效 */
.opacity-10 {
	opacity: 0.1;
}

.opacity-8 {
	opacity: 0.8;
}

.opacity-80 {
	opacity: 0.8;
}

.backdrop-blur-sm {
	backdrop-filter: blur(8px);
}

/* 滚动条 */
.overflow-hidden {
	overflow: hidden;
}

.overflow-x-auto {
	overflow-x: auto;
}

.scrollbar-hide::-webkit-scrollbar {
	display: none;
}

.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* 表单元素 */
.form-input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.375rem;
	font-size: 1rem;
	transition: border-color 0.3s ease;
}

.form-input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
}

/* 单选按钮样式 */
.form-radio {
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid #d1d5db;
	border-radius: 50%;
	outline: none;
	transition: all 0.3s ease;
}

.form-radio:checked {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	background-image: radial-gradient(circle, white 30%, transparent 30%);
}

.form-radio.text-accent:checked {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
}

/* 标签样式 */
label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

/* 内联标签 */
.inline-flex {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.ml-2 {
	margin-left: 0.5rem;
}

/* iframe优化 */
iframe {
	background-color: white;
}

/* 按钮样式 */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	background-color: var(--color-primary);
	color: white;
	border: none;
	border-radius: 0.375rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-primary:hover {
	background-color: var(--color-secondary);
	transform: translateY(-1px);
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	background-color: #f3f4f6;
	color: #374151;
	border: 1px solid #e5e7eb;
	border-radius: 0.375rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-secondary:hover {
	background-color: #e5e7eb;
	transform: translateY(-1px);
}

/* 公式框样式 */
.formula-box {
	padding: 1rem;
	background-color: rgba(30, 136, 229, 0.1);
	border-left: 4px solid var(--color-accent);
	border-radius: 0.375rem;
}

/* 响应式设计 */
@media (min-width: 768px) {
	.md\:flex-row {
		flex-direction: row;
	}

	.md\:items-center {
		align-items: center;
	}

	.md\:mb-0 {
		margin-bottom: 0;
	}

	.md\:p-6 {
		padding: 1.5rem;
	}

	.md\:p-8 {
		padding: 2rem;
	}

	.md\:text-base {
		font-size: 1rem;
	}

	.md\:text-2xl {
		font-size: 1.5rem;
	}

	.md\:h-\[650px\] {
		height: 650px;
	}
}

/* iframe容器样式 */
iframe {
	width: 100%;
	height: 600px;
	border: 0;
	transition: all 0.5s ease-in-out;
}

/* 加载指示器样式 */
.animate-spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Tab样式 */
.tab-btn {
	position: relative;
	padding: 1rem 1.5rem;
	background: none;
	border: none;
	color: #6b7280;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.tab-btn:hover {
	color: #4b5563;
	background-color: rgba(0, 0, 0, 0.05);
}

.tab-active {
	color: var(--color-primary);
	font-weight: 500;
}

.tab-active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--color-primary);
}

/* 电池计算器特定样式 */
.calculator-section {
	margin-bottom: 1.5rem;
}

.calculator-title {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	color: var(--color-primary);
}

.calculator-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.result-container {
	margin-top: 1.5rem;
	padding: 1rem;
	background-color: rgba(224, 247, 250, 0.5);
	border-radius: 0.5rem;
}

.result-title {
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--color-primary);
}

.result-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-accent);
}

/* 响应式计算器网格 */
@media (max-width: 767px) {
	.calculator-grid {
		grid-template-columns: 1fr;
	}
}

/* 自定义工具类 */
/* 核心工具类 */
.content-auto {
	content-visibility: auto;
}

/* 滚动条美化 */
.scrollbar-hide {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
	display: none; /* Chrome, Safari and Opera */
}

/* 卡片阴影效果 */
.card-shadow {
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
	transition: all 300ms ease-in-out;
}
.card-shadow:hover {
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 输入框样式 */
.form-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	outline: none;
	transition: all 300ms;
}
.form-input:focus {
	box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.3);
	border-color: #1e88e5;
}
.form-input:hover {
	border-color: rgba(30, 136, 229, 0.5);
}

/* 按钮样式 */
.btn-primary {
	width: 100%;
	background-color: #1e88e5;
	color: white;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 0.5rem;
	transition: all 300ms;
	transform: scale(1);
}
.btn-primary:hover {
	background-color: rgba(30, 136, 229, 0.9);
	transform: scale(1.02);
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.btn-primary:active {
	transform: scale(0.98);
}
.btn-primary:focus {
	outline: none;
	box-shadow:
		0 0 0 2px #ffffff,
		0 0 0 5px rgba(30, 136, 229, 0.5);
}

.btn-secondary {
	width: 100%;
	background-color: #d32f2f;
	color: white;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 0.5rem;
	transition: all 300ms;
	transform: scale(1);
}
.btn-secondary:hover {
	background-color: rgba(211, 47, 47, 0.9);
	transform: scale(1.02);
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.btn-secondary:active {
	transform: scale(0.98);
}
.btn-secondary:focus {
	outline: none;
	box-shadow:
		0 0 0 2px #ffffff,
		0 0 0 5px rgba(211, 47, 47, 0.5);
}

/* 公式框样式 */
.formula-box {
	background-color: rgba(224, 247, 250, 0.8);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(0, 121, 107, 0.3);
	border-radius: 0.75rem;
	padding: 20px;
	color: #00796b;
	font-weight: 500;
	text-align: center;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: all 300ms;
}
.formula-box:hover {
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 标签页样式 */
.tab-btn {
	padding: 16px 24px;
	font-size: 0.875rem;
	transition: all 300ms;
	white-space: nowrap;
	border-radius: 0.5rem 0.5rem 0 0;
	position: relative;
	overflow: hidden;
}
@media (min-width: 768px) {
	.tab-btn {
		font-size: 1rem;
	}
}
.tab-btn:hover {
	color: rgba(30, 136, 229, 0.8);
	background-color: #f9fafb;
}

.tab-btn::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #1e88e5;
	transition: all 300ms ease-out;
}

.tab-btn:hover::after {
	width: 100%;
}

.tab-active {
	color: #1e88e5;
	font-weight: 500;
	background-color: rgba(255, 255, 255, 0.5);
}

.tab-active::after {
	width: 100%;
}

/* 加载动画 */
.loading-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	background-color: #f3f4f6;
	border-radius: 0.375rem;
}

/* 玻璃态效果 */
.glass-effect {
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 渐变文本 */
.gradient-text {
	background-clip: text;
	color: transparent;
	background-image: linear-gradient(to right, #00796b, #1e88e5);
}

/* 基础样式 */
body {
	font-family:
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		'Helvetica Neue',
		Arial,
		'Noto Sans',
		sans-serif;
	color: #1f2937;
	background-image: linear-gradient(to bottom right, #e0f7fa, #eff6ff);
	min-height: 100vh;
}

/* 自定义滚动条 */
body::-webkit-scrollbar {
	width: 8px;
}

body::-webkit-scrollbar-track {
	background-color: #f3f4f6;
}

body::-webkit-scrollbar-thumb {
	background-color: rgba(30, 136, 229, 0.5);
	border-radius: 9999px;
	transition: background-color 300ms;
}

body::-webkit-scrollbar-thumb:hover {
	background-color: #1e88e5;
}

/* 动画效果 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* 应用动画类 */
.fade-in {
	animation: fadeIn 0.5s ease-out;
}

.slide-in {
	animation: slideIn 0.4s ease-out;
}

.pulse-slow {
	animation: pulse 3s ease-in-out infinite;
}

.float-slow {
	animation: float 3s ease-in-out infinite;
}

/* 电阻色环样式 */
.color-band {
	height: 50px;
	width: 20px;
	margin: 0 2px;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
	cursor: pointer;
}

.color-band:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 输入数字时的实时计算效果 */
.input-live {
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-live:focus {
	box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.25);
	transform: translateY(-1px);
}

/* 响应式断点增强 */
@media (max-width: 640px) {
	.tab-btn {
		padding: 12px 16px;
		font-size: 0.75rem;
	}

	header {
		padding: 16px !important;
	}

	h1 {
		font-size: 1.25rem !important;
	}
}

/* 颜色变量定义 */
:root {
	--color-primary: #00796b;
	--color-secondary: #004d40;
	--color-accent: #1e88e5;
	--color-danger: #d32f2f;
	--color-light: #e0f7fa;
	--color-dark: #263238;
}

/* Tailwind自定义颜色变量（已通过:root定义） */
/* 注意：由于使用CDN版本，@layer指令已移除 */

/* =================================================== */
/* 嵌入式工具集 - 计算器共享样式 */
/* =================================================== */

/* 内联图标样式 - 不依赖外部字体文件 */
.fa {
	display: inline-block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	vertical-align: middle;
	text-align: center;
}

.fa-exchange:before {
	content: '⇄';
	font-size: 1.2em;
}

.fa-refresh:before {
	content: '↺';
	font-size: 1.2em;
}

.fa-info-circle:before {
	content: 'ℹ';
	font-size: 1.2em;
}

.fa-calculator::before {
	content: '📟';
	font-size: 1.2em;
}

.fa-clock-o::before {
	content: '⏰';
	font-size: 1.2em;
}

/* 计算器通用容器样式 */
.calculator-container {
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* 输入组样式 */
.input-group {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-bottom: 1rem;
	background-color: #f8fafc;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.2s ease;
}

.input-group:hover {
	background-color: #f1f5f9;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.input-label {
	background-color: #4a90e2;
	color: white;
	padding: 0.75rem 1rem;
	font-weight: 600;
	min-width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* 电池计算器专用标签宽度 */
.battery-calculator .input-label {
	min-width: 120px;
}

/* 欧姆定律计算器特定样式覆盖 */
.ohm-calculator .input-label {
	min-width: 100px;
}

/* 欧姆定律计算器按钮布局 */
.ohm-calculator .button-group {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}

.ohm-calculator .button-group .btn-secondary {
	width: auto;
	flex-shrink: 0;
}

/* 欧姆定律图表样式 */
.ohm-chart-container {
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	border-radius: 16px;
	padding: 1.5rem;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.ohm-chart-container:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.ohm-chart-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #475569;
	text-align: center;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #e2e8f0;
}

.ohm-chart {
	transition: transform 0.3s ease;
}

.ohm-chart:hover {
	transform: scale(1.02);
}

.ohm-chart .formula-text {
	font-size: 14px;
	font-weight: 500;
	fill: #374151;
}

.ohm-chart .center-circle {
	font-size: 16px;
}

/* NTC分压计算器特定样式覆盖 */
.ntc-divider-calculator .input-label {
	min-width: 160px;
}

/* NTC分压计算器输出卡片背景颜色 */
.ntc-divider-calculator .result-card {
	background-color: #f8fafc;
}

/* NTC分压计算器特定卡片颜色 */
.ntc-divider-calculator .ntc-resistance-card {
	background: linear-gradient(135deg, #ffcc80 0%, #ffb74d 100%);
	color: #333;
}

.ntc-divider-calculator .voltage-card {
	background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
	color: #333;
}

.ntc-divider-calculator .adc-value-card {
	background: linear-gradient(135deg, #90caf9 0%, #64b5f6 100%);
	color: #333;
}

.ntc-divider-calculator .percentage-card {
	background: linear-gradient(135deg, #ce93d8 0%, #ba68c8 100%);
	color: #333;
}

.ntc-divider-calculator .ratio-card {
	background: linear-gradient(135deg, #ff8a65 0%, #ff7043 100%);
	color: #333;
}

.input-field {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
}

.input-field input,
.input-field select {
	width: 100%;
	padding: 0.75rem 1rem;
	padding-right: 3.5rem; /* 增加右侧内边距，为单位留出足够空间 */
	border: none;
	background: transparent;
	font-size: 1rem;
	outline: none;
	color: #374151;
}

.input-field input:focus,
.input-field select:focus {
	background-color: white;
}

/* 统一禁用所有浏览器的数字输入框默认箭头，避免遮挡问题 */
/* Firefox */
.input-field input[type='number'] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/* Chrome, Safari, Edge, Opera */
.input-field input[type='number']::-webkit-outer-spin-button,
.input-field input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.input-unit {
	position: absolute;
	right: 1rem;
	color: #64748b;
	font-size: 0.875rem;
	pointer-events: none;
}

/* 按钮样式 */
.btn-primary {
	background-color: #10b981;
	color: white;
	border: none;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 500;
	font-size: 1rem;
	flex: 1;
}

.btn-primary:hover {
	background-color: #059669;
	transform: translateY(-1px);
}

.btn-primary:disabled,
.btn-primary.opacity-50 {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.btn-secondary {
	background-color: #f59e0b;
	color: white;
	border: none;
	border-radius: 6px;
	padding: 0.75rem;
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 500;
	font-size: 1.1rem;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-secondary:hover {
	background-color: #d97706;
	transform: translateY(-1px);
}

/* 自定义复选框样式 */
.calc-checkbox {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid #10b981;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.calc-checkbox:checked {
	background-color: #10b981;
	border-color: #10b981;
}

.calc-checkbox:checked::after {
	content: '✓';
	position: absolute;
	color: white;
	font-size: 12px;
	font-weight: bold;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.calc-checkbox:hover {
	transform: scale(1.05);
}

.calc-checkbox:focus {
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.checkbox-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: #f9fafb;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.checkbox-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #4b5563;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* 结果卡片容器 */
.result-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	width: 100%;
	box-sizing: border-box;
}

/* 结果卡片样式 */
.result-card {
	padding: 1.25rem;
	border-radius: 12px;
	text-align: center;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.result-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 结果卡片内容 */
.result-title {
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
	opacity: 0.9;
	font-weight: 500;
}

.result-value {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.result-icon {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.result-unit {
	font-size: 0.875rem;
	opacity: 0.8;
	font-weight: 500;
}

/* 通用卡片背景样式 - 适用于公式和说明区域 */
.info-section,
.formula-box {
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.info-section:hover,
.formula-box:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

/* 公式区域样式 */
.formula-box {
	font-family: monospace;
	text-align: center;
	display: block;
	opacity: 1;
	visibility: visible;
}

.formula-title {
	font-weight: bold;
	margin-bottom: 1rem;
	color: #475569;
	font-size: 1rem;
	text-align: center;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #e2e8f0;
}

.formula-text {
	color: #334155;
	font-size: 0.9rem;
	line-height: 1.5;
	display: block;
	margin-bottom: 0.5rem;
}

.formula-row {
	color: #334155;
	font-size: 0.9rem;
	line-height: 1.8;
	margin-bottom: 0.75rem;
	white-space: pre-wrap;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 0.5rem 1rem;
	border-radius: 6px;
	border-left: 3px solid #4a90e2;
	text-align: left;
}

/* 说明区域样式 */
.info-section {
	margin-top: 1.5rem;
}

.info-title {
	font-weight: bold;
	margin-bottom: 1rem;
	color: #475569;
	font-size: 1rem;
	text-align: center;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #e2e8f0;
}

.info-list {
	list-style-type: disc;
	padding-left: 1.5rem;
	margin: 0;
}

.info-list li {
	padding: 0.5rem 0.25rem;
	color: #333;
	font-size: 0.875rem;
	line-height: 1.5;
	background-color: transparent;
	margin-bottom: 0.25rem;
	transition: color 0.2s ease;
}

.info-list li:last-child {
	margin-bottom: 0;
}

.info-list li:hover {
	background-color: white;
}

/* 动画效果 */
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 卡片颜色变体 */
/* 电容换算器颜色 */
.farad-card {
	background: linear-gradient(135deg, #ffcc80 0%, #ffb74d 100%);
	color: #333;
}

.millifarad-card {
	background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
	color: #333;
}

.microfarad-card {
	background: linear-gradient(135deg, #90caf9 0%, #64b5f6 100%);
	color: #333;
}

.nanofarad-card {
	background: linear-gradient(135deg, #ce93d8 0%, #ba68c8 100%);
	color: #333;
}

.picofarad-card {
	background: linear-gradient(135deg, #ff8a65 0%, #ff7043 100%);
	color: #333;
}

.tolerance-card {
	background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
	color: #333;
}

/* 电池计算器颜色样式已移至battery-calculator.html */

/* 结果卡片默认样式 */
.time-card {
	/* 在大屏幕上占据两列 */
	grid-column: span 2;
}

/* 响应式和兼容性设置 */
@media (max-width: 640px) {
	.result-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.time-card {
		grid-column: span 2;
	}
}

/* 确保在插件环境中的兼容性 */
body {
	margin: 0;
	padding: 0;
	font-size: 16px;
}

/* 确保容器在不同环境中自适应 */
.calculator-container > div.max-w-md {
	max-width: 100% !important;
	width: 100%;
	box-sizing: border-box;
}

/* 确保上标正确显示 */
sup {
	font-size: 0.75em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}

/* 页脚样式 */
footer {
	width: 100%;
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.875rem;
	color: #6b7280;
}
